<script src="https://cdn.bootcss.com/countup.js/1.9.3/countUp.js"></script>
<style>

    .glyphicon-arrow-up{
        color: red;
    }

    .glyphicon-arrow-down{
        color: #76d471;
    }
    #refreshs{
        position:fixed;
        top: 0px;

        width: 150px;
        border: 1px solid #cccccc;
        border-right: none;
        border-radius:5px 0 0 5px;
        background: #ffffff;
        padding: 10px 5px;
        z-index: 999;
        min-height: 145px;
    }
    .arrows{
        position: absolute;
        left: -41px;
        top: 40px;
        width: 40px;
        height: 40px;
        line-height:40px;
        text-align: center;
        border: 1px solid #ffffff;
        background: #62a6f5;
        cursor: pointer;
    }
    .refreshss{
        cursor: pointer;
        background: #62a6f5;
        position: absolute;
        left: -41px;
        top: 79px;
        width: 40px;
        height: 40px;
        line-height:40px;
        text-align: center;
        border: 1px solid #ffffff;
    }
    .refreshsss{
        top: 120px;
    }
</style>
<div id="refreshs" style="right:-150px;">
    <!--<div class="arrows"><span style="color:#ffffff;font-size: 16px;" class="glyphicon glyphicon-arrow-right"></span></div>-->
    <div class="refreshss" onclick="refreshs('refresh')"><span style="color:#ffffff;font-size: 16px;" class="glyphicon glyphicon-refresh"></span></div>
    <div class="refreshss refreshsss" onclick="refreshs('play')">
        <span style="color:#ffffff;font-size: 16px;" class="fa fa-pause"></span>
    </div>
</div>
<form class="layui-form" action="">
    <div class="row" style="margin-top: 10px;">
    <#if shiro.hasPermission("data:index:ipCount")>
        <div class=" col-md-1 stats_box" id="stats5">
            <div class="stats_title">
                IP数
            </div>
            <div class="stats_amount" id="stats5_num">
                0
            </div>
            <div class="stats_contrast">
                同比<span class="stats_contrast_num">0%</span><span class="glyphicon" ></span>
            </div>
        </div>
    </#if>
    <#if shiro.hasPermission("data:index:lockedDomain")>
        <div class="col-md-1 stats_box" id="stats7">
            <div class="stats_title">
                被封域名数
            </div>
            <div class="stats_amount" id="stats7_num">
                0
            </div>
            <div class="stats_contrast">
                同比<span class="stats_contrast_num">0%</span><span class="glyphicon" ></span>
            </div>
        </div>
</#if>
<#if shiro.hasPermission("data:index:newUser")>
        <div class="col-xs-6 col-md-1 stats_box" id="stats2">
            <div class="stats_title">
                新增用户数
            </div>
            <div class="stats_amount" id="stats2_num">
                0
            </div>
            <div class="stats_contrast">
                同比<span class="stats_contrast_num">0%</span><span class="glyphicon" ></span>
            </div>
        </div>
</#if>
<#if shiro.hasPermission("data:index:activeUser")>
        <div class="col-xs-6 col-md-1 stats_box" id="stats3">
            <div class="stats_title">
                活跃用户数
            </div>
            <div class="stats_amount" id="stats3_num">
                0
            </div>
            <div class="stats_contrast">
                同比<span class="stats_contrast_num">0%</span><span class="glyphicon" ></span>
            </div>
        </div>
</#if>
<#if shiro.hasPermission("data:index:totalUser")>
        <div class="col-xs-6 col-md-1 stats_box" id="stats1">
            <div class="stats_title">
                累计用户数
            </div>
            <div class="stats_amount" id="stats1_num">
                0
            </div>

        </div>
</#if>
<#if shiro.hasPermission("data:index:newArticle")>
        <div class="col-xs-6 col-md-1 stats_box" id="stats6">
            <div class="stats_title">
                文章新增数
            </div>
            <div class="stats_amount" id="stats6_num">
                0
            </div>
            <div class="stats_contrast">
                同比<span class="stats_contrast_num">0%</span><span class="glyphicon" ></span>
            </div>
        </div>
</#if>
<#if shiro.hasPermission("data:index:forwardArticle")>
        <div class="col-xs-6 col-md-1 stats_box"  id="stats4">
            <div class="stats_title">
                转发文章数
            </div>
            <div class="stats_amount" id="stats4_num">
                0
            </div>
            <div class="stats_contrast">
                同比<span class="stats_contrast_num">0%</span><span class="glyphicon" ></span>
            </div>
        </div>
</#if>
<#if shiro.hasPermission("error:shareArticleNum:share")>
<div class="col-xs-6 col-md-1 stats_box"  id="stats11">
    <div class="stats_title">
        转发文章次数
    </div>
    <div class="stats_amount" id="stats11_num">
        0
    </div>
    <div class="stats_contrast">
        同比<span class="stats_contrast_num">0%</span><span class="glyphicon" ></span>
    </div>
</div>
</#if>

<#if shiro.hasPermission("index:articleReadForm:showText")>
<div class="col-xs-6 col-md-1 stats_box"  id="stats21">
    <div class="stats_title">
        文章阅读(私聊)
    </div>
    <div class="stats_amount" id="stats21_num">
        0
    </div>
    <div class="stats_contrast">
        同比<span class="stats_contrast_num">0%</span><span class="glyphicon" ></span>
    </div>
</div>
</#if>
<#if shiro.hasPermission("index:articleReadForm:showText")>
<div class="col-xs-6 col-md-1 stats_box"  id="stats22">
    <div class="stats_title">
        文章阅读(群聊)
    </div>
    <div class="stats_amount" id="stats22_num">
        0
    </div>
    <div class="stats_contrast">
        同比<span class="stats_contrast_num">0%</span><span class="glyphicon" ></span>
    </div>
</div>
</#if>
<#if shiro.hasPermission("index:articleReadForm:showText")>
<div class="col-xs-6 col-md-1 stats_box"  id="stats23">
    <div class="stats_title">
        文章阅读(朋友圈)
    </div>
    <div class="stats_amount" id="stats23_num">
        0
    </div>
    <div class="stats_contrast">
        同比<span class="stats_contrast_num">0%</span><span class="glyphicon" ></span>
    </div>
</div>
</#if>

<!--<#if shiro.hasPermission("data:index:ArticlePeople")>-->
<!--<div class="col-xs-6 col-md-1 stats_box"  id="stats8">-->
    <!--<div class="stats_title">-->
        <!--转发文章人数-->
    <!--</div>-->
    <!--<div class="stats_amount" id="stats8_num">-->
        <!--0-->
    <!--</div>-->
    <!--<div class="stats_contrast">-->
        <!--同比<span class="stats_contrast_num">0%</span><span class="glyphicon" ></span>-->
    <!--</div>-->
<!--</div>-->
<!--</#if>-->
<#if shiro.hasPermission("data:index:expend")>
<div class="col-xs-6 col-md-1 stats_box"  id="stats9">
    <div class="stats_title">
        收益(总)
    </div>
    <div class="stats_amount" id="stats9_num">
        0
    </div>
    <div class="stats_contrast">
        同比<span class="stats_contrast_num">0%</span><span class="glyphicon" ></span>
    </div>
</div>
</#if>
<#if shiro.hasPermission("data:index:ipExpend")>
<div class="col-xs-6 col-md-1 stats_box"  id="stats10">
    <div class="stats_title">
        ip消耗(总)
    </div>
    <div class="stats_amount" id="stats10_num">
        0
    </div>
    <div class="stats_contrast">
        同比<span class="stats_contrast_num">0%</span><span class="glyphicon" ></span>
    </div>
</div>
</#if>
<#if shiro.hasPermission("index:comparePriceIp:showTopText")>
<div class="col-xs-6 col-md-1 stats_box"  id="stats12">
    <div class="stats_title">
        竞价ip消耗
    </div>
    <div class="stats_amount" id="stats12_num">
        0
    </div>
    <div class="stats_contrast">
        同比<span class="stats_contrast_num">0%</span><span class="glyphicon" ></span>
    </div>
</div>
</#if>
<#if shiro.hasPermission("index:comparePriceExpend:showTopText")>
<div class="col-xs-6 col-md-1 stats_box"  id="stats13">
    <div class="stats_title">
        竞价ip收益
    </div>
    <div class="stats_amount" id="stats13_num">
        0
    </div>
    <div class="stats_contrast">
        同比<span class="stats_contrast_num">0%</span><span class="glyphicon" ></span>
    </div>
</div>
</#if>

    </div>
</form>
<script>
    //index:comparePriceIp:showTopText
    //index:comparePriceExpend:showTopText
    var getdata = null;
    var statsData = false;
    var indexloading = null;
    var clickid=[];
    var indexTimer = false;
    window.onload=function(){

        var form = layui.form;
        refreshs('refresh');
}


    function refreshs(type){

        indexloading = layer.load(2);
        statsInit(clickid);
        chartPage.init(clickid);
        window.clearInterval(getdata);
        //console.log()
        if(type == 'refresh'){
            $(".refreshsss span").removeClass("fa-play").addClass("fa-pause");
            indexTimer = true;
            getdata = window.setInterval(function(){
                if($(window.parent.document).find(".page-tabs-content .active").attr('data-id')!='index2.html'){
                    return;
                }
                indexloading = layer.load(2);
                statsInit(clickid);
                chartPage.init(clickid);
            },1000*60);
        }
        if(type == 'play'){
            if(!indexTimer){
                $(".refreshsss span").removeClass("fa-play").addClass("fa-pause");
                indexTimer = true;
                getdata = window.setInterval(function(){
                    if($(window.parent.document).find(".page-tabs-content .active").attr('data-id')!='index2.html'){
                        return;
                    }
                    indexloading = layer.load(2);
                    statsInit(clickid);
                    chartPage.init(clickid);
                },1000*60);
            }else{
                $(".refreshsss span").addClass("fa-play").removeClass("fa-pause");
                indexTimer = false;
            }
        }


    }

    function statsInit(id){
        if(!statsData){
            statsData = true;
            $.ajax({
                type : "POST",
                url : "statis/getStatis",
                //cache : false,
                contentType : false,
               // processData : false,
                crossDomain: true,
                xhrFields: {
                    withCredentials: true
                },
                dataType : "json",
                success: function(data) {
                    statsData = false;
                    layer.close(indexloading);
                    if(data.code==0){
                        //累计用户数
                        setData('stats1_num','#stats1',data.result.totalUser)
                        //新增用户数
                        setData('stats2_num','#stats2',data.result.newUser,data.result.newUserRiseOrFall,data.result.newUserPercent)
                        //活跃用户数
                        setData('stats3_num','#stats3',data.result.activeUser,data.result.activeUserRiseOrFall,data.result.activeUserPercent)
                        //转发文章数
                        setData('stats4_num','#stats4',data.result.forwardArticle,data.result.forwardArticleRiseOrFall,data.result.forwardArticlePercent)

                        //文章新增数
                        setData('stats6_num','#stats6',data.result.newArticle,data.result.newArticleRiseOrFall,data.result.newArticlePercent)

                    }else{
                        layer.msg('数据获取失败');
                    }
                },
                error:function(){
                    statsData = false;
                    layer.msg('数据获取失败');
                }
            });
            //被封域名
            ajaxc({
                permit:'data:index:lockedDomain',
                type : "POST",
                url : "domainsta/findIndexDomainData",
               // cache : false,
                dataType : "json",
                crossDomain: true,
                xhrFields: {
                    withCredentials: true
                },
                success: function(data) {
                    if(data.code==0){
                        //被封域名数
                        setData('stats7_num','#stats7',data.result.dataCount,data.result.riseOrFall,data.result.ratio)
                    }else{
                        layer.msg('数据获取失败');
                    }
                },
                error:function(){
                    statsData = false;
                    layer.msg('数据获取失败');
                }
            });
            //ip数量
            ajaxc({
                permit:'data:index:ipCount',
                type : "POST",
                url : "ip/getIndexIpData",
                //cache : false,
                dataType : "json",
                crossDomain: true,
                xhrFields: {
                    withCredentials: true
                },
                success: function(data) {
                    if(data.code==0){

                        setData('stats5_num','#stats5',data.ipCount.ipCount,data.ipCount.riseOrFall,data.ipCount.ratio)
                    }else{
                        layer.msg('数据获取失败');
                    }
                },
                error:function(){
                    statsData = false;
                    layer.msg('数据获取失败');
                }
            });
            //转发文章人数
            // ajaxc({
            //     permit:'data:index:ArticlePeople',
            //     type : "POST",
            //     url : "articleStatis/getIndexForwardArticlePeopleTotal",
            //     cache : false,
            //     dataType : "json",
            //     success: function(data) {
            //         if(data.code==0){
            //             setData('stats8_num','#stats8',data.result.tcount,data.result.riseOrFall,data.result.percent)
            //
            //         }else{
            //             layer.msg('数据获取失败');
            //         }
            //     },
            //     error:function(){
            //         statsData = false;
            //         layer.msg('数据获取失败');
            //     }
            // });
            //分享文章次数
            ajaxc({
                permit:'error:shareArticleNum:share',
                type : "POST",
                url : "articleStatis/getShareArticleNumStatisTotal",
               // cache : false,
                dataType : "json",
                crossDomain: true,
                xhrFields: {
                    withCredentials: true
                },
                success: function(data) {
                    if(data.code==0){
                        setData('stats11_num','#stats11',data.result.tcount,data.result.riseOrFall,data.result.percent)
                    }else{
                        layer.msg('数据获取失败');
                    }
                },
                error:function(){
                    statsData = false;
                    layer.msg('数据获取失败');
                }
            });
            //收益
            ajaxc({
                permit:'data:index:expend',
                type : "POST",
                url : "articleStatis/getIndexForwardArticleExpendTotal",
               // cache : false,
                dataType : "json",
                crossDomain: true,
                xhrFields: {
                    withCredentials: true
                },
                success: function(data) {
                    if(data.code==0){
                        setData('stats9_num','#stats9',data.result.tcount,data.result.riseOrFall,data.result.percent)
                    }else{
                        layer.msg('数据获取失败');
                    }
                },
                error:function(){
                    statsData = false;
                    layer.msg('数据获取失败');
                }
            });
            //ip消耗
            ajaxc({
                permit:'data:index:ipExpend',
                type : "POST",
                url : "articleStatis/getIndexCustomerIpStatisTotal",
               // cache : false,
                dataType : "json",
                crossDomain: true,
                xhrFields: {
                    withCredentials: true
                },
                success: function(data) {
                    if(data.code==0){
                        setData('stats10_num','#stats10',data.result.tcount,data.result.riseOrFall,data.result.percent)
                    }else{
                        layer.msg('数据获取失败');
                    }
                },
                error:function(){
                    statsData = false;
                    layer.msg('数据获取失败');
                }
            });
            //竞价ip
            ajaxc({
                permit:'index:comparePriceIp:showTopText',
                type : "POST",
                url : "biddingTopRateStatis/getIndexBiddingClickIpTopRateTotal",
                //cache : false,
                dataType : "json",
                crossDomain: true,
                xhrFields: {
                    withCredentials: true
                },
                success: function(data) {
                    if(data.code==0){
                        setData('stats12_num','#stats12',data.result.tcount,data.result.riseOrFall,data.result.percent)
                    }else{
                        layer.msg('数据获取失败');
                    }
                },
                error:function(){
                    layer.msg('数据获取失败');
                }
            });
            //竞价收益
            ajaxc({
                permit:'index:comparePriceExpend:showTopText',
                type : "POST",
                url : "biddingTopRateStatis/getIndexBiddingCostTopRateTotal",
               // cache : false,
                dataType : "json",
                xhrFields: {
                    withCredentials: true
                },
                crossDomain: true,
                success: function(data) {
                    if(data.code==0){
                        setData('stats13_num','#stats13',data.result.tcount,data.result.riseOrFall,data.result.percent)
                    }else{
                        layer.msg('数据获取失败');
                    }
                },
                error:function(){
                    layer.msg('数据获取失败');
                }
            });
            //文章阅读统计(私聊)
            ajaxc({
                permit:'index:articleReadForm:showText',
                type : "POST",
                url : "articleStatis/getIndexArticleReadNumSingleMessageStaticsTotal",
                // cache : false,
                dataType : "json",
                xhrFields: {
                    withCredentials: true
                },
                crossDomain: true,
                success: function(data) {
                    if(data.code==0){
                        setData('stats21_num','#stats21',data.result.tcount,data.result.riseOrFall,data.result.percent)
                    }else{
                        layer.msg('数据获取失败');
                    }
                },
                error:function(){
                    layer.msg('数据获取失败');
                }
            });
            //文章阅读统计(群聊)
            ajaxc({
                permit:'index:articleReadForm:showText',
                type : "POST",
                url : "articleStatis/getIndexArticleReadNumGroupMessageStaticsTotal",
                // cache : false,
                dataType : "json",
                xhrFields: {
                    withCredentials: true
                },
                crossDomain: true,
                success: function(data) {
                    if(data.code==0){
                        setData('stats22_num','#stats22',data.result.tcount,data.result.riseOrFall,data.result.percent)
                    }else{
                        layer.msg('数据获取失败');
                    }
                },
                error:function(){
                    layer.msg('数据获取失败');
                }
            });
            //文章阅读统计(朋友圈)
            ajaxc({
                permit:'index:articleReadForm:showText',
                type : "POST",
                url : "articleStatis/getIndexArticleReadNumTimeLineStaticsTotal",
                // cache : false,
                dataType : "json",
                xhrFields: {
                    withCredentials: true
                },
                crossDomain: true,
                success: function(data) {
                    if(data.code==0){
                        setData('stats23_num','#stats23',data.result.tcount,data.result.riseOrFall,data.result.percent)
                    }else{
                        layer.msg('数据获取失败');
                    }
                },
                error:function(){
                    layer.msg('数据获取失败');
                }
            });

        }

    }
    function isInteger(obj) {

        return Math.round(obj) == obj   //是整数，则返回true，否则返回false
    }


    function setData(id,ids,totalCount,riseOrFall,countRate){
        var demo = new CountUp(id, 0, transformNum(totalCount),isInteger(transformNum(totalCount))?0:1, 2, {
            useEasing: true,
            useGrouping: true,
            separator: ',',
            decimal: '.',
            suffix: (totalCount+'').length>=5?'万':''
        });
        demo.start();

        if(riseOrFall==1){
            $(ids+' .stats_contrast_num').html('+'+countRate+'%').css({'color':'red'})
            $(ids+' .glyphicon').removeClass('glyphicon-arrow-down ').addClass('glyphicon-arrow-up ')
        }else{
            $(ids+' .stats_contrast_num').html(countRate+'%').css({'color':'#76d471'});
            $(ids+' .glyphicon').removeClass('glyphicon-arrow-up ').addClass('glyphicon-arrow-down ')
        }
    }
    function transformNum(e,b){
        if(String(e).length<=4){
            return String(e);
        }else{
            var _e
            if(((parseFloat(e)/10000).toString()).indexOf('.')!=-1){
                _e = (parseFloat(e)/10000).toFixed(1);
            }else{
                _e = (parseFloat(e)/10000)
            }
            return _e+ (b==1?'万':'');
        }
    }
</script>